import { defineComponent, ref, watch, nextTick } from "vue";
import util from "@/libs/util";
import columns from "./columns";
import { Button } from "view-ui-plus";
import LevelForm from "../levelForm";
import { useTableList } from "@/hooks";
import { getLevelPage } from "@/api/baseData/testProject";

export default defineComponent({
  props: {
    projectId: String,
  },
  setup(props) {
    const showModal = ref(false);

    const standardIcrud = ref<HTMLElement>();
    // option配置
    const iCrudOptions = util.env.iCrudOptions;
    // 列表数据
    const list = ref<any>([]);
    // 列表配置
    const columnsTable = columns;
    // 跨页多选
    const selectionRowOptions = {
      selectKey: "userId", // 跨页多选的参考字段，数据唯一
      batchRemove: util.env.iCrudOptions.selectionRowOptions.batchRemove, //删除按钮样式
    };

    let getApiTableList;
    watch(
      () => props.projectId,
      (value) => {
        if (value) {
          const data = useTableList(getLevelPage, list, (data) => data, {
            projectId: value,
          });
          getApiTableList = data.getApiTableList;
          nextTick(() => {
            const icrudRefs: any = standardIcrud.value;
            icrudRefs.handleFetchData();
          });
        }
      }
    );

    // 新增操作
    const createTableApi = () => {
      return new Promise((resolve, reject) => {});
    };
    // 编辑操作
    const editTableApi = (params, fullParams) => {
      return new Promise((resolve, reject) => {});
    };
    // 删除操作
    const deleteTableApi = () => {
      return new Promise((resolve, reject) => {});
    };
    // 多选删除
    const delMultipleTableApi = (selectRow) => {
      return new Promise((resolve, reject) => {});
    };
    // 设置表格多选选中的数据
    const setCheckedItem = (item) => {};
    // 编辑按钮
    const handleShowEditDialog = (row: any, column: any, index: number) => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowEditDialog({ row, column, index });
    };
    // 删除按钮
    const handleShowRemoveDialog = (row: any, column: any, index: number) => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowRemoveDialog({ row, column, index });
    };

    const levelChange = () => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleFetchData();
    };

    const handleSpan = ({ row, column, rowIndex, columnIndex }) => {
      if (rowIndex == 0 && columnIndex == 1) {
        return {
          rowspan: list.value.length,
          colspan: 1,
        };
      }
      if (rowIndex > 0 && columnIndex == 1) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    };

    return () => {
      if (!props.projectId) return <span></span>;
      return (
        <div>
          <i-crud
            title="等级划分"
            ref={standardIcrud}
            form-options={iCrudOptions.formOptions}
            page-options={{ show: false }}
            border={true}
            data={list.value}
            columns={columnsTable}
            fetch-data={getApiTableList}
            fetch-remove={deleteTableApi}
            fetch-batch-remove={delMultipleTableApi}
            onOnSelectionChange={setCheckedItem}
            addFormOptions={{
              show: false,
            }}
            toolbarOptions={{
              show: true,
              items: ["refresh"],
            }}
            span-method={handleSpan}
            v-slots={{
              actions: () => (
                <Button
                  icon="md-add"
                  type="primary"
                  onClick={() => (showModal.value = true)}
                >
                  添加
                </Button>
              ),
              sort: ({ row, column, index }) => <span>{index + 1}</span>,
            }}
          ></i-crud>
          <LevelForm
            v-model={showModal.value}
            projectId={props.projectId}
            onChange={levelChange}
          />
        </div>
      );
    };
  },
});
